<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">安全设置</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="securitySettings">
            <div class="Settings" @click="ReplacePphone()">
                <div class="Settings_left">
                    <img src="../../../static/images/icon-phone-black.png" alt="">
                    <div>更换登录手机号</div>
                </div>
                <div class="Settings_right">
                    <div>{{phone}}</div>
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <div class="Settings" @click="changePassword()">
                <div class="Settings_left">
                    <img src="../../../static/images/icon-password-black.png" alt="">
                    <div>重置密码</div>
                </div>
                <div class="Settings_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            userinfoing:{},
            phone:'',
        }
    },
    mounted(){
        this.userinfo();//获取用户信息接口
    },
    methods:{
        // 获取用户信息接口
        userinfo(){
            this.$api.userinfo().then((res) =>{
                if(res.status == '0000'){
                    // this.userinfoing = res.payload
                    this.phone = res.payload.phoneNo.substr(0, 3) + '****' + res.payload.phoneNo.substr(7)
                }else{
                    Toast(res.describe);
                }
            })
        },

        // 更换登录手机号
        ReplacePphone(){
            this.$router.push({ name: "ReplacePphone" });
        },
        // 修改密码
        changePassword(){
            this.$router.push({ name: "changePassword" });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .securitySettings{
        width: 100%;
        background: #FFFFFF;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .Settings{
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
    }
    .Settings_left{
        display: flex;
        align-items: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .Settings_left>img{
        width: 24px;
        height: 24px;
        margin-right: 8px;   
    }
    .Settings_right{
        display: flex;
        align-items: center;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .Settings_right>img{
        width: 24px;
        height: 24px;
        margin-left: 10px;
    }
</style>